<!-- components/pay-password-dialog.vue -->
<template>
  <!-- 遮罩层 -->
  <view class="pay-password-mask" v-if="visible" @click.self="handleClose">
    <!-- 弹窗主体 -->
    <view class="pay-password-container">
      <!-- 头部 -->
      <view class="pay-password-header">
        <text class="title">请输入支付密码</text>
        <text class="close-btn" @click="handleClose">×</text>
      </view>
      
      <!-- 金额显示 -->
      <view class="pay-amount" v-if="amount">
        支付金额：<text class="amount">¥{{ amount }}</text>
      </view>
      
      <!-- 密码输入框 -->
      <view class="password-input">
        <view 
          class="input-item" 
          v-for="i in 6" 
          :key="i"
          :class="{ 'active': password.length >= i }"
        >
          <text v-if="password.length >= i">•</text>
        </view>
      </view>
      
      <!-- 忘记密码 -->
      <view class="forget-password" @click="handleForget">
        忘记密码？
      </view>
      
      <!-- 数字键盘 -->
      <view class="number-keyboard">
        <view class="keyboard-row" v-for="(row, rowIndex) in keyboard" :key="rowIndex">
          <view 
            class="keyboard-key"
            v-for="(key, keyIndex) in row"
            :key="keyIndex"
            @click="handleKeyPress(key)"
            :class="{
              'gray-bg': key === '',
              'delete-key': key === 'delete'
            }"
          >
            <template v-if="key !== 'delete' && key !== ''">
              {{ key }}
            </template>
            <uni-icons v-else-if="key === 'delete'" type="backspace" size="24" color="#333"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  visible: Boolean,
  amount: [String, Number]
})

const emit = defineEmits(['update:visible', 'complete', 'forget'])

const password = ref('')
const keyboard = [
  ['1', '2', '3'],
  ['4', '5', '6'],
  ['7', '8', '9'],
  ['', '0', 'delete']
]

// 关闭弹窗
const handleClose = () => {
  password.value = ''
  emit('update:visible', false)
}

// 忘记密码
const handleForget = () => {
  emit('forget')
}

// 按键处理
const handleKeyPress = (key) => {
  if (key === 'delete') {
    password.value = password.value.slice(0, -1)
  } else if (key !== '' && password.value.length < 6) {
    password.value += key
  }
  
  // 密码输入完成
  if (password.value.length === 6) {
    emit('complete', password.value)
    // 清空密码
    setTimeout(() => {
      password.value = ''
    }, 300)
  }
}

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (!newVal) {
    password.value = ''
  }
})
</script>

<style lang="scss" scoped>
.pay-password-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.pay-password-container {
  width: 90%;
  max-width: 600rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  animation: fadeInUp 0.3s;
}

.pay-password-header {
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-bottom: 1rpx solid #f0f0f0;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
  }
  
  .close-btn {
    position: absolute;
    right: 30rpx;
    font-size: 40rpx;
    color: #999;
  }
}

.pay-amount {
  padding: 30rpx 0;
  text-align: center;
  font-size: 28rpx;
  color: #666;
  
  .amount {
    font-size: 36rpx;
    color: #f56c6c;
    font-weight: bold;
    margin-left: 10rpx;
  }
}

.password-input {
  display: flex;
  justify-content: center;
  margin: 20rpx 0 40rpx;
  
  .input-item {
    width: 80rpx;
    height: 80rpx;
    margin: 0 10rpx;
    border: 2rpx solid #ddd;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    
    &.active {
      border-color: #2979ff;
    }
  }
}

.forget-password {
  text-align: right;
  padding: 0 30rpx 20rpx;
  color: #2979ff;
  font-size: 26rpx;
}

.number-keyboard {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
  
  .keyboard-row {
    display: flex;
    margin-bottom: 20rpx;
    padding: 0 20rpx;
  }
  
  .keyboard-key {
    flex: 1;
    height: 90rpx;
    margin: 0 10rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    
    &.gray-bg {
      background-color: transparent;
    }
    
    &.delete-key {
      background-color: #f0f0f0;
    }
    
    &:active {
      background-color: #e0e0e0;
    }
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(100rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>